window.onload = () => {
    // 初始化
    class Wujie extends HTMLElement {
        constructor () {
            super()

            // 创建一个shadowDom,样式隔离,不会影响外层的样式
            let dom = this.attachShadow({mode:'open'})
            let template = document.querySelector('#wujie') as HTMLTemplateElement
            // template不能够直接使用，需要深度克隆一份
            dom.appendChild(template.content.cloneNode(true))

            // 打印传入的参数
            console.log(this.getAttr('url'),this.getAttr('age'))
        }

        // 接受参数
        private getAttr(attr:string) {
            return this.getAttribute(attr)
        }

        //生命周期自动触发有东西插入
        connectedCallback () {
            console.log('类似于vue 的mounted');
         }
         //生命周期卸载
         disconnectedCallback () {
               console.log('类似于vue 的destory');
         }
         //跟watch类似
         attributeChangedCallback (name:any, oldVal:any, newVal:any) {
             console.log('跟vue 的watch 类似 有属性发生变化自动触发');
         }

    }
    // 挂载 第一个参数是起名字（不可以驼峰式），第二个参数是类的名
    // 类似于Vue组件，原生js写的组件
    window.customElements.define('wu-jie',Wujie)
}